/*
 *  RELATED CONTENT
 *  More juice. "Cross sell" style links to blog posts or case studies below the content of the page.
 *
 */

.related-content {
  $padding-medium: $card-padding-medium;
  $padding-large: $card-padding-large;
  $gutter-small: 20px;
  $gutter: 30px;
  $work-item-exerpt-height: $blog-post-list-item-excerpt-height;
  $work-item-image-height: $blog-post-list-item-image-height;

  @include core-layout();
  padding-top: $vertical-spacing;
  padding-bottom: $vertical-spacing;
  background: $lightGrey;

  .wrapper {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
  }

  .more-juice-title {
    text-align: center;
    @extend .h3;
    margin-bottom: 60px;
  }

  .related-content-item {
    display: flex;

    .card-item {
      width: 100%;
    }
  }

  @media screen and (min-width: $bp-medium) {
    padding-top: $vertical-spacing-medium;
    padding-bottom: $vertical-spacing-large;

    .related-content-cards {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .related-content-item {
      width: 49%;
    }

    .more-juice-title {
      font-size: 40px;
    }


  }

  @media screen and (min-width: $bp-large) {
    padding-top: $vertical-spacing-large;
    padding-bottom: $vertical-spacing-large;
  }

}
